<template>
    <div class="mapContainer">
        <mapContainer @mapReady="ready" />
    </div>
</template>

<script setup>
import shop from "@/assets/images/shop.png"
import shopActive from "@/assets/images/activeshop.png"
import infoarrow from "@/assets/images/infoarrow.png"
import close from "@/assets/images/close.png"
import { shopInfoById } from "@/api/cleanStatus"
import EventBus from "@/utils/eventBus"
let mapIns = null
//解析定位结果
const ready = (map) => {
    mapIns = map
    map.on('complete', () => {
        nextTick(() => {
            addCurrentPoint()
        })
    })
}
const props = defineProps({
    shopList: {
        type: Object
    }
})
// watch(() => props.shopList, (newV) => {
//     nextTick(() => {
//         if(newV) {
//             console.log(newV)
//         }
//         addCurrentPoint()
//     })
// }, {
//     deep: true,
// })

const markerMap = ref([])
function addCurrentPoint() {
    if (mapIns && mapIns.getAllOverlays('marker').length > 0) {
        mapIns.clearMap()
    }
    nextTick(() => {
        markerMap.value = []
        props.shopList.forEach((item) => {
            let marker = new AMap.Marker({
                map: mapIns,
                position: [item.shoplon, item.shoplat],
                icon: new AMap.Icon({
                    size: [30, 35],
                    image: shop,
                    imageSize: [30, 35]
                }),
                label: {
                    direction: 'bottom',
                    content: item['店铺名'],
                    offset: new AMap.Pixel(0, -5),
                },
                // 这个一定要添加，方式缩放的时候点位偏移，x表示图片宽度的一半 y表示图片的高，整体取负值
                offset: new AMap.Pixel(-15, -35)
                // 114.125181.22.607298
            });
            marker.on('click', (e) => {
                nextTick(() => {
                    markerClickFnc(marker, item)
                })
            })
            // marker.on('mouseover', (e) => {
            //     marker.setLabel({
            //         direction: 'top',
            //         content: item['店铺名'],

            //     })
            // })
            // marker.on('mouseout', (e) => {
            //     marker.setLabel({
            //         content: "",
            //     })
            // })
            markerMap.value.push(marker)
        })
        mapIns.getAllOverlays('marker')
        mapIns.setFitView(markerMap.value, true)
    })

}
function closeWindow(marker) {
    let dom = document.getElementById('info-window')
    if (dom) {
        dom.remove()
        marker.setIcon(new AMap.Icon({
            size: [30, 35],
            image: shop,
            imageSize: [30, 35]
        }))
        // currentCar.value = null
        // currentShop.value = null
    }
}
function createInfoWindow(item) {
    console.log("🚀 ~ createInfoWindow ~ item:", item)
    let info = {
        路段名: item['路段名'] ?? '-',
        桶数: item['桶数'] ? item['桶数'] + '桶' : '-',
        重量: item['重量'] ? item['重量'] + 'kg' : "-",
        收运状态: item['status'],
        收运时间: item.realtime ?? '-',
        坐标: item.lon ? item.lon + ',' + item.lat : '-'
    }
    let contentStr = ""
    for (let key in info) {
        contentStr += ` <div class="basic-info"> <span class="label"> ${key}: <span class="value">${info[key]}</span>  <span/> </div>`
    }
    //   <img src="${markerInfo}" /> 
    let infoBox =
        `
      <div class="info-wrap" id="info-window">
            <div class="info-title"> 
                <div class="title-wrap">
                    <div class="title">${item['店铺名']}</div>
                    <div class="icon" id="info-close">
                        <img src="${close}" /> 
                    </div>
                </div>
            </div>
            <div class="content" style="width:280px">
                ${contentStr}
            </div>
      </div>
    `
    return new AMap.InfoWindow({
        isCustom: true,
        content: infoBox,
        offset: [-160, 40]
    })
}
defineExpose({
    addCurrentPoint
})
function markerClickFnc(marker, item) {
    resetIcon()
    marker.setIcon(new AMap.Icon({
        size: [30, 35],
        image: shopActive,
        imageSize: [30, 35]
    }))
    createInfoWindow(item).open(mapIns, marker.getPosition())
    // 给弹框的关闭按钮添加点击事件，关闭弹窗
    document.getElementById('info-close').onclick = () => {
        closeWindow(marker)
    }
}
function resetIcon() {
    if (markerMap.value.length > 0) {
        markerMap.value.forEach((item) => {
            item.setIcon(new AMap.Icon({
                size: [30, 35],
                image: shop,
                imageSize: [30, 35]
            }))
        })

    }
}
onMounted(() => {
    EventBus.on('sendInfo', (item) => {
        for (let marker of markerMap.value) {
            if (marker.getLabel().content == item['店铺名']) {
                mapIns.setFitView([marker], true, [60, 60, 60, 60], 21)
                markerClickFnc(marker, item)
            }
        }

    })
})
</script>
<style>
.info-wrap {
    position: relative;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    overflow: hidden;
}

.info-wrap>.info-title {
    height: 44px;
    background: linear-gradient(180deg, rgba(156, 224, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%), rgba(255, 255, 255, 1);
}

.info-wrap>.info-title>.title-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    justify-content: space-between;
    padding: 0 14px;
    box-sizing: border-box;
    font-weight: bold;

}

.info-title>.title {
    color: rgba(51, 51, 51, 1);
}

.info-title>.title-wrap>.icon {
    cursor: pointer;
}

.info-title>.title-wrap>.icon img {
    width: 12px;
    height: 12px;
}

.info-wrap>.line {
    margin: 15px 0;
    width: 100%;
    height: 1px;
    background: rgba(239, 239, 239, 1);
}

.basic-info {
    margin: 5px 15px;
}

.basic-info .label {
    color: rgba(128, 128, 128, 1);
}

.basic-info .value {
    color: rgba(51, 51, 51, 1);
}

.amap-info-contentContainer {
    position: relative;
}

.info-arrow {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);

}

.info-arrow>img {
    width: 30px;
    height: 18px;
}

.amap-marker-label {
    border: unset;
    background: unset;
}
</style>

<style lang="scss" scoped>
.mapContainer {
    position: relative;
    height: 100%;
    width: 100%;
}
</style>